<template>
	<view class="warp">
		<uni-nav-bar title="社区数字店" left-icon="back" @clickLeft="$tab.nav()" :fixed="true" :border="false"
			:statusBar="true"></uni-nav-bar>

		<div class="p-20 bg-white">
			<u-search placeholder="日照香炉生紫烟" v-model="keyword" shape="square" :showAction="false"></u-search>
		</div>

		<div class="py-32 px-20">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<div class="list">
					<view class="w-full li round-8 hidden" v-for="item in list" :key="item.id"
						@click="goDetail(item.id)">
						<image :src="handleUrl(item	.logo)" class="w-full" mode="widthFix"></image>

						<div class="p-16 text-28 bg-white">
							{{ item.name }}
						</div>
					</view>
				</div>
			</s-pull-scroll>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: "",
			list: [],
			globalConfig: getApp().globalData.config
		};
	},
	onLoad() {
		this.refresh()
	},
	methods: {
		handleUrl(url) {
			if (url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1) {
				return url
			} else {
				return this.globalConfig.imagePrefix + url
			}
		},
		goDetail(id) {
			this.$tab.nav(`/pages/shops/detail?id=${id}`)
		},
		refresh() {
			this.$nextTick(() => {
				this.$refs.pullScroll.refresh();
			});
		},
		pullDown(pullScroll) {
			setTimeout(() => {
				this.loadData(pullScroll);
			}, 200);
		},
		loadData(pullScroll) {
			setTimeout(async () => {
				if (pullScroll.page == 1) {
					this.list = [];
				}

				const res = await this.$Api.index.storeList({
					pageNum: pullScroll.page,
					pageSize: 10,
					name: this.keyword,
					prefecture: 1
				})

				this.list = this.list.concat(res.rows || []);

				if (this.list.length >= res.total) {
					pullScroll.finish();
				} else {
					pullScroll.success();
				}
			}, 500);
		},
	}
}
</script>

<style lang="scss">
.list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20rpx;
	font-size: 0;


}
</style>